﻿<!DOCTYPE HTML>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品分类管理</title>

    <link href="/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
    <link href="/plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <link href="/plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
    <link href="/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet"/>
    <link href="/plugins/select2/css/select2.css" rel="stylesheet"/>
    <link href="/plugins/select2/theme/select2-bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/common.css" rel="stylesheet"/>
</head>
<body>
<div id="main">
    <div id="toolbar">
        <a shiro:hasPermission="admin:goodstype:create" class="waves-effect waves-button" href="javascript:;"
           onclick="createAction()"><i class="zmdi zmdi-plus"></i>
            新增商品分类</a>
    </div>
    <table id="table"></table>
</div>
<script src="/plugins/jquery.1.12.4.min.js"></script>
<script src="/plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="/plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
<script src="/plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/plugins/waves-0.7.5/waves.min.js"></script>
<script src="/plugins/jquery-confirm/jquery-confirm.min.js"></script>
<script src="/plugins/select2/js/select2.js"></script>

<script src="/js/common.js"></script>
<script>
    var $table = $('#table');
    $(function () {
        $table.bootstrapTable({
            url: 'list',
            height: getHeight(),
            striped: true,
            search: true,
            showRefresh: true,
            showColumns: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            detailView: true,
            detailFormatter: 'detailFormatter',
            pagination: true,
            paginationLoop: false,
            sidePagination: 'server',
            silentSort: false,
            smartDisplay: false,
            escape: true,
            searchOnEnterKey: true,
            idField: 'id',
            maintainSelected: true,
            toolbar: '#toolbar',
            columns: [
                {field: 'id', title: '编号', sortable: true, align: 'center'},
                {field: 'goodsTypeName', title: '商品分类名称'}
            ]
        });

    });


    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }

    // 新增
    function createAction() {
        createDialog = $.dialog({
            animationSpeed: 300,
            title: '新增商品分类',
            content: 'url:create',
            onContentReady: function () {
                initMaterialInput();
                $('select').select2();
            }
        });
    }
</script>
</body>
</html>